<template>
  <view class="add-map">
    <view class="name-box"><input class="map-name" placeholder="请输入地图标题" maxlength="100" v-model="name" @change="updateName" /></view>
    <view class="file-box">
      <view v-if="!tempFilePath" class="add-file" @click="chooseFile()"><view class="iconfont icon-add"></view></view>
      <view v-else class="file-preview">
        <cover-view class="delete-file" @click="clearFile()">X</cover-view>
        <image class="map-file" :src="previewPath" mode="aspectFill" @click="previewImg()"></image>
      </view>
    </view>
    <view v-if="isEdit" class="delete-btn" @click="deleteMap()">删除</view>
    <view class="submit-btn" @click="submit()">确定</view>
    <uni-popup ref="deleteDialog" type="dialog">
      <uni-popup-dialog type="error" cancelText="否" confirmText="是" content="确定要删除？" @confirm="doDelete()"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      name: '',
      previewPath: '',
      tempFilePath: '',
      filePath: '',
      isEdit: false
    }
  },
  mounted() {
    this.isEdit = !!this.params.id
  },
  methods: {
    updateName(e) {
      this.name = e.detail.value
    },
    chooseFile() {
      const self = this
      uni.chooseImage({
        count: 1,
        success(result) {
          console.log('choose file', result)
          const tempPath = result.tempFilePaths[0] || ''
          self.tempFilePath = tempPath
          self.previewPath = tempPath
        }
      })
    },
    clearFile() {
      this.tempFilePath = ''
      this.previewPath = ''
      this.filePath = ''
    },
    previewImg() {
      uni.previewImage({
        urls: [this.previewPath]
      })
    },
    submit() {
      const self = this
      if (self.tempFilePath) {
        self.uploadFile(self.tempFilePath, () => {
          self.saveMap()
        })
      }
    },
    uploadFile(filePath, callback) {
      const self = this
      uni.uploadFile({
        url: '/sys/upload',
        filePath,
        name: 'file',
        success(result) {
          if (result.data.url) {
            self.filePath = result.data.url
            if (callback instanceof Function) {
              callback()
            }
          }
        }
      })
    },
    saveMap() {
      const self = this
      uni.request({
        url: '/project_pic/add',
        method: 'POST',
        data: {
          xm_id: self.params.projectId,
          name: self.name,
          img_path: self.filePath
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        }
      })
    },
    deleteMap() {
      this.$refs.deleteDialog.open()
    },
    doDelete() {
      const self = this
      uni.request({
        url: '/project_pic/del',
        method: 'POST',
        data: {
          xm_id: self.params.projectId,
          id: self.params.id
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '操作成功'
            })
            self.goBack()
          }
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.add-map {
  height: 100vh;
  position: relative;
  padding: 30rpx 30rpx 230rpx;
  background-color: $white;
}
.name-box {
  border-bottom: 2rpx solid $border-base;
  padding-bottom: 30rpx;
}
.file-box {
  margin-top: 30rpx;
}
.add-file {
  width: 100%;
  height: 460rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  border: 2rpx dashed $border-base;
  font-size: 72rpx;
  color: $text-base;
}
.file-preview {
  position: relative;
  .delete-file {
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    top: 0;
    right: 0;
    color: $white;
    background-color: $danger;
    font-size: $font-size-5;
    &:after {
      content: '';
      display: block;
      position: absolute;
      left: -10rpx;
      right: -10rpx;
      top: -10rpx;
      bottom: -10rpx;
    }
  }
  .map-file {
    width: 100%;
    height: 460rpx;
  }
}
.delete-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100rpx;
  background-color: $danger;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
.submit-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $primary;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
